<template>
  <view class="search-container">
    <!-- 搜索导航组件 -->
    <NavBar @sendSearch="sendSearch" :isSearch="isSearch" @updateVal="parentVal=$event" :parentVal="parentVal"></NavBar>
    <!-- 搜索包裹 -->
    <view class="search-wrapper">
      <!-- 没有进行搜索的操作 -->
      <view v-if="isShowHistory" class="search-history-container">
        <!-- 头部 -->
        <view class="search-header">
          <text class="history-text">搜索历史</text>
          <text @click="cleanHistory()" class="history-clean">清空</text>
        </view>
        <!-- 内容部分 -->
        <view class="search-history-content">
          <view @click="openHistory(item)" class="history-content-item" v-for="item in historyList" :key="item">{{item}}</view>
        </view>

        <view class="no-data">当前没有搜索历史</view>
      </view>

    <!-- 开始进行搜索的操作 -->
		<view v-else class="search-list-container">
			<ListItem  @saveHistory="saveHistory" :isShowLoading="isShowLoading"
			 :list="searchList" @loadmore="loadmore" v-if="searchList.length"></ListItem>
			<view v-else class="no-data">没有搜索到相关数据</view>
		</view>
    </view>
  </view>
</template>

<script>
import { mapMutations,mapState } from 'vuex';
export default {
  data () {
    return {
      isSearch: true,
      searchList: [],
      parentVal: '',
      isShowLoading: false,
      isShowHistory: true,
    }
  },
  methods: {
    // 开始进行内容搜索
    async sendSearch () {
      this.isShowHistory = false
      if (!this.parentVal) {
        this.isShowHistory = true
        this.searchList = []
        return
      }
      const articleList = await this.$http.getSearch({ searchVal: this.parentVal })
      this.searchList = articleList
    },
    // 弹出搜索内容
    openHistory(val) {
      this.parentVal = val
      this.sendSearch()
    },  
    // 进行收藏历史记录操作
    saveHistory(val) {
      this.setHistory(this.parentVal)
    },
    ...mapMutations(['setHistory','cleanHistory'])
  },
  computed: {
    ...mapState(['historyList'])
  }
}
</script>

<style lang="scss" scoped>
  @import './css/search.scss'
</style>